// 返回上一层
document.querySelector('.icon-fanhui').addEventListener('click',()=>{
  history.go(-1)
})

// 声明全局变量
let count = 1
let goods_Sku

// 从本地获取点击的商品id
const goodsId = localStorage.getItem('goodsInformation')

// 请求获取数据
axios({
  url:'/goods/detail',
  params:{
    goodsId
  }
}).then(result =>{
  console.log(result)
  goods_Sku = result.data.data.detail.skuList[0].goods_sku_id
  // 渲染图片
  const goodsImage = result.data.data.detail.goods_images
  // console.log(goodsImage)
  document.querySelector('.swiper-wrapper').innerHTML= goodsImage.map(item=>{
    return `
      <div class="swiper-slide"><img src="${item.preview_url}" alt=""></div>
    `
  }).join('')

  var swiper = new Swiper(".mySwiper", {
    slidesPerView: 1,
    spaceBetween: 30,
    loop: true,
    observer:true,
    autoplay:true,
    autoplay:{
      delay:1000,
      disableOnInteraction:false
    },
    autoHeight:true,  
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });

  // 渲染产品文字信息
  // console.log(result.data.data.detail)
  const info = result.data.data.detail
  document.querySelector('.information_info').innerHTML=`
  <div class="price">
    <div class="left">
      <span>￥<i>${info.goods_price_max}</i></span>
      <span>${info.line_price_max==='0.00'?'':`￥${info.line_price_max}`}</span>
    </div>
    <div class="right">已售${info.goods_sales}件</div>
  </div>
  <div class="txt ellipsis-2">${info.goods_name}</div>
  `

  // 渲染商品描述
  document.querySelector('.information_pic').innerHTML = result.data.data.detail.content
})

// 渲染购物车商品数量
axios({
  url:'/cart/total'
}).then(result=>{
  // console.log(result.data.data.cartTotal)
  if(result.data.data.cartTotal === 0) {
    document.querySelector('.count').style.display = 'none'
  }
  document.querySelector('.count').innerHTML = result.data.data.cartTotal
})

// 点击七天无理由退货显示弹框
document.querySelector('.information_show').addEventListener('click',()=>{
  // document.querySelector('.information_tip').style.bottom = 0
  document.querySelector('.information_tip').style.transform = `translateY(${0})`
  document.querySelector('.information_mask').classList.add('mask')
})
axios({url:'/goods.service/list',params:{goodsId}}).then(result=>{
  // console.log(result.data.data.list)
  // 渲染退货显示弹框内容
  document.querySelector('.information_tip_top .information_tip_mes').innerHTML=result.data.data.list[0].name
  document.querySelector('.information_tip_top .information_tip_txt').innerHTML=result.data.data.list[0].summary
  document.querySelector('.information_tip_bottom .information_tip_mes').innerHTML=result.data.data.list[1].name
  document.querySelector('.information_tip_bottom .information_tip_txt').innerHTML=result.data.data.list[1].summary
})

// 点击关闭X，提示框消失
document.querySelector('.icon-close').addEventListener('click',()=>{
  document.querySelector('.information_tip').style.transform = `translateY(${100}%)`
  document.querySelector('.information_mask').classList.remove('mask')
})

// 点击查看更多跳转
document.querySelector('.comment_more').addEventListener('click',()=> {
  location.href='./comment.html'
})

// 获取数据渲染评论条数
axios({
  url:'/comment/total',
  params:{
    goodsId
  }
}).then(result=>{
  // console.log(result)
  // console.log(result.data.data.total.all)
  document.querySelector('.comment_count i').innerHTML=result.data.data.total.all
})

// 渲染商品显示的数量
axios({
  url:'/comment/listRows',
  params:{
    goodsId,
    limit:2
  }
}).then(result=>{
  // console.log(result.data.data.list)
 document.querySelector('.comment_detail').innerHTML= result.data.data.list.map(item=>{
    let str = ''
    if(item.score === 10) {
      str =` 
      <span class="iconfont icon-favorite-filling"></span>
      <span class="iconfont icon-favorite-filling"></span>
      <span class="iconfont icon-favorite-filling"></span>
      <span class="iconfont icon-favorite-filling"></span>
      <span class="iconfont icon-favorite-filling"></span>
      `
    } else if ( item.score === 20 ) {
      str =` 
      <span class="iconfont icon-favorite-filling"></span>
      <span class="iconfont icon-favorite-filling"></span>
      <span class="iconfont icon-favorite-filling"></span>
      <span class="iconfont icon-favorite"></span>
      <span class="iconfont icon-favorite"></span>
      `
    } else if ( item.score === 30 ) {
      str =` 
      <span class="iconfont icon-favorite-filling"></span>
      <span class="iconfont icon-favorite"></span>
      <span class="iconfont icon-favorite"></span>
      <span class="iconfont icon-favorite"></span>
      <span class="iconfont icon-favorite"></span>
      `
    }
    return `
    <div class="comment_list" data-id="${item.comment_id}">
      <div class="comment_list_user" data-id="${item.user_id}">
        <div class="user">
          <img src="${item.user.avatar_url?`${item.user.avatar_url}`:`./uploads/default-avatar.png`}" alt="">
        </div>
        <div class="nickname">${item.user.nick_name}</div>
        <div class="score">
         ${str}
        </div>
      </div>
      <div class="txt">${item.content}</div>
      <div class="date">${item.create_time}</div>
    </div>
  `}).join('')
})

// 点击加入购物车显示弹框及相关内容
document.querySelector('.footer_add').addEventListener('click',()=>{
  document.querySelector('.information_addTip_bottom a').innerHTML='加入购物车'
  document.querySelector('.information_addTip_bottom a').style.backgroundColor='rgb(255, 148, 2)'
  document.querySelector('.num').innerHTML = 1
  count = 1
  document.querySelector('.reduce').disabled = true
  // 调用加入购物车和立即购买弹框函数
  buyGoods()
})

// 点击加入购物车添加至购物车
document.querySelector('.information_addTip_bottom a').addEventListener('click',async (e)=>{
  // 判断点击的是加入购物车
  if(e.target.innerHTML ==='加入购物车'){
    const num = document.querySelector('.num').innerHTML
    const result = await axios.post('/cart/add',{
        headers:{
          "Access-Token":localStorage.getItem('user-id'),
          platform:'H5'
        },
        goodsId:goodsId,
        goodsNum:num,
        goodsSkuId:goods_Sku
    })
    console.log(result)
    document.querySelector('.count').innerHTML = result.data.data.cartTotal
    document.querySelector('.count').style.display = 'block'
    document.querySelector('.tips').style.display = 'block'
    setTimeout(()=>{
      document.querySelector('.tips').style.display = 'none'
    },1000)
  }
  if(e.target.innerHTML==='立即购买') {
    // 跳转至订单结算页面






  }
  document.querySelector('.information_addTip').style.bottom = '-64vw'
  document.querySelector('.information_mask').classList.remove('mask')
})

// 点击立即购买
document.querySelector('.footer_buy').addEventListener('click',()=>{
  document.querySelector('.information_addTip_bottom a').innerHTML='立即购买'
  document.querySelector('.information_addTip_bottom a').style.backgroundColor='rgb(254, 86, 10)'
  document.querySelector('.num').innerHTML = 1
  count = 1
  document.querySelector('.reduce').disabled = true
  // 调用加入购物车和立即购买弹框函数
  buyGoods()
})

// 点击退出购买弹框业务
// 点击关闭，退出加入购物车或者立即购买页面
document.querySelector('.icon-error').addEventListener('click',()=>{
  document.querySelector('.information_addTip').style.bottom = '-64vw'
  document.querySelector('.information_mask').classList.remove('mask')
})

// 点击遮罩层，提示框消失
document.querySelector('.information_mask').addEventListener('click',()=>{
  document.querySelector('.information_tip').style.transform = `translateY(${100}%)`
  document.querySelector('.information_mask').classList.remove('mask')
  document.querySelector('.information_addTip').style.bottom = '-64vw'
})





// 封装加入购物车和立即购买弹框函数
async function buyGoods() {
  document.querySelector('.information_mask').classList.add('mask')
  document.querySelector('.information_addTip').style.bottom = '0vw'
  const result = await axios.get('/goods/detail',{params:{goodsId}})
  // console.log(result)
  document.querySelector('.addTip_top_left img').src = result.data.data.detail.goods_image
  document.querySelector('.addTip_price i').innerHTML = result.data.data.detail.goods_price_max
  document.querySelector('.addTip_inventory').innerHTML = `库存:${result.data.data.detail.stock_total}`
}

// 封装点击加购业务
  // 点击数量+1
  document.querySelector('.add').addEventListener('click',()=>{
    count++
    document.querySelector('.num').innerHTML = count
    if(count !== 1) {
      document.querySelector('.reduce').disabled = false
      document.querySelector('.reduce').classList.remove('active')
    }
  })
  
  // 点击数量-1
  document.querySelector('.reduce').addEventListener('click',()=>{
    if(count !== 1) {
      document.querySelector('.reduce').disabled = false
    }
    count--
    document.querySelector('.num').innerHTML = count
    if(count === 1) {
      document.querySelector('.reduce').disabled = true
      document.querySelector('.reduce').classList.add('active')
    }
  })